<h1 class="page-title-actions">
  Tasks
  <span class="actions">
    <button type="button" class="btn btn-sm btn-primary" (click)="createTask()" [appRole]="['ROLE_CREATE']">
      Create task
    </button>
    <button type="button" class="btn btn-sm btn-secondary" grafanaDashboardTasks>Grafana Dashboard</button>
    <button type="button" class="btn btn-sm btn-secondary" wavefrontDashboardTasks>Wavefront Dashboard</button>
  </span>
</h1>

<clr-datagrid
  (clrDgRefresh)="refresh($event)"
  [clrDgLoading]="loading"
  [(clrDgSelected)]="!grouped ? null : selected"
  *ngIf="isInit"
  #datagrid
>
  <clr-dg-action-bar *ngIf="grouped">
    <button type="button" class="btn btn-sm btn-secondary" (click)="setMode(false)">Cancel</button>
    <button
      type="button"
      [disabled]="selected?.length === 0"
      class="btn btn-sm btn-secondary"
      (click)="scheduleTasks(selected)"
      [appRole]="['ROLE_SCHEDULE']"
      appFeature="schedules"
    >
      Schedule task(s)
    </button>
    <button
      type="button"
      [disabled]="selected?.length === 0"
      class="btn btn-sm btn-outline-danger"
      (click)="destroyTasks(selected)"
      [appRole]="['ROLE_DESTROY']"
    >
      Destroy task(s)
    </button>
    <button
      type="button"
      [disabled]="selected?.length === 0"
      class="btn btn-sm btn-secondary"
      (click)="cloneTasks(selected)"
      [appRole]="['ROLE_CREATE']"
    >
      Clone task(s)
    </button>
  </clr-dg-action-bar>
  <clr-dg-action-bar *ngIf="!grouped">
    <button
      type="button"
      class="btn btn-sm btn-secondary"
      (click)="setMode(true)"
      [appRole]="['ROLE_DESTROY', 'ROLE_SCHEDULE']"
    >
      Group Actions
    </button>
    <button type="button" class="btn btn-sm btn-secondary" (click)="refresh(state)">Refresh</button>
  </clr-dg-action-bar>
  <clr-dg-column
    [clrDgField]="'taskName'"
    [clrDgSortOrder]="context.by === 'taskName' ? (context.reverse ? -1 : 1) : 0"
    (clrDgColumnResize)="updateContext('sizeName', $event)"
    [style.width.px]="context.sizeName | datagridcolumn: datagrid:contextName:15 | async"
    [clrFilterValue]="context.taskName"
  >
    <ng-container> Name </ng-container>
  </clr-dg-column>
  <clr-dg-column
    (clrDgColumnResize)="updateContext('sizeDescription', $event)"
    [style.width.px]="context.sizeDescription | datagridcolumn: datagrid:contextName:15 | async"
  >
    <ng-container> Description </ng-container>
    <clr-dg-filter style="display: none"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-column
    [clrDgField]="'dslText'"
    [clrDgSortOrder]="context.by === 'dslText' ? (context.reverse ? -1 : 1) : 0"
    (clrDgColumnResize)="updateContext('sizeDsl', $event)"
    [style.width.px]="context.sizeDsl | datagridcolumn: datagrid:contextName:15 | async"
  >
    <ng-container> Definition </ng-container>
    <clr-dg-filter style="display: none"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-column
    (clrDgColumnResize)="updateContext('sizeStatus', $event)"
    [style.width.px]="context.sizeStatus | datagridcolumn: datagrid:contextName:15 | async"
  >
    <ng-container> Status </ng-container>
    <clr-dg-filter style="display: none"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-row *ngFor="let task of page?.items" [clrDgItem]="task" [clrDgSelectable]="!task.composedTaskElement">
    <clr-dg-cell>
      <a class="text-truncate" routerLink="/tasks-jobs/tasks/{{ task.name }}">
        {{ task.name }}
      </a>
    </clr-dg-cell>
    <clr-dg-cell
      ><span class="text-truncate">{{ task.description }}</span></clr-dg-cell
    >
    <clr-dg-cell
      ><span class="dsl-text dsl-truncate">{{ task.dslText }}</span></clr-dg-cell
    >
    <clr-dg-cell
      ><span class="{{ task.labelStatusClass() }}">{{ task.status }}</span></clr-dg-cell
    >
    <clr-dg-action-overflow *ngIf="!grouped">
      <button class="action-item" (click)="details(task)">Details</button>
      <button class="action-item" (click)="launch(task)" [appRole]="['ROLE_DEPLOY']">Launch</button>
      <button
        class="action-item"
        (click)="schedule(task)"
        [appRole]="['ROLE_SCHEDULE']"
        appFeature="schedules"
        [disabled]="task.composedTaskElement"
      >
        Schedule
      </button>
      <button
        class="action-item"
        (click)="destroyTasks([task])"
        [appRole]="['ROLE_DESTROY']"
        [disabled]="task.composedTaskElement"
      >
        Destroy
      </button>
      <button
        class="action-item"
        (click)="cloneTasks([task])"
        [appRole]="['ROLE_CREATE']"
        [disabled]="task.composedTaskElement"
      >
        Clone
      </button>
      <button
        class="action-item"
        (click)="cleanup(task)"
        [appRole]="['ROLE_DESTROY']"
        [disabled]="task.composedTaskElement"
      >
        Cleanup
      </button>
      <button class="action-item" grafanaDashboardTask [task]="task">Grafana Dashboard</button>
      <button class="action-item" wavefrontDashboardTask [task]="task">Wavefront Dashboard</button>
    </clr-dg-action-overflow>
  </clr-dg-row>
  <clr-dg-placeholder>No results found.</clr-dg-placeholder>
  <clr-dg-footer>
    <clr-dg-pagination
      #pagination
      [clrDgTotalItems]="page?.total"
      [clrDgPageSize]="context.size"
      [clrDgPage]="context.current"
    >
      <clr-dg-page-size [clrPageSizeOptions]="[10, 20, 50, 100]">Tasks per page</clr-dg-page-size>
      {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of {{ page?.total }} tasks
    </clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>

<app-task-destroy #destroyModal (onDestroyed)="refresh(state)"></app-task-destroy>
<app-task-clone #cloneModal (onCloned)="refresh(state)"></app-task-clone>
<app-task-cleanup #cleanupModal (onCleaned)="refresh(state)"></app-task-cleanup>
